<script lang="ts">
import { defineComponent, ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getBanner } from "../api/search"
import { GridItem } from 'vant';
import SearchInput from '../components/SearchInput.vue'
export default defineComponent({
  components: {},
  setup() {
    let router: any = useRouter();
    let search: any = (): any => {
      router.push({ path: '/searchpage' });
    }
    let workshows: any = (id: any, index: any): any => {
      console.log(id);

      router.push({
        path: '/worksshow',
        query: {
          id: id,
          index: index
        }
      });

    }



    let listid: any = ref(null)
    let getBannerlist: any = ref(null);
    let categorieslist: any = ref(null);
    const getBannerFun = () => {
      getBanner().then((data: any) => {
        console.log(data);
        getBannerlist.value = data.data.banners
        categorieslist.value = data.data.categories

      })
    }
    onMounted(() => {
      getBannerFun();

    })


    return {
      search,
      workshows,
      getBannerlist,
      categorieslist,
      listid
    }
  }
})
</script>





<template>

  <div class="search">
    <!-- 上部分 -->
    <div class="searchmain-top">
      <!-- 搜索框开始 -->
      <div class="search-top-input" @click="search">
        <div class="search-box iconfont icon-sousuo1">搜索作品、创作人、正版视频素材</div>
      </div>
      <!-- 搜索框结束 -->

      <!-- 轮播图开始 -->
      <div class="serarch-banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for=" item in getBannerlist" :key="item.id">
            <img :src="item.cover" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 轮播图结束 -->
      <!-- 分类开始 -->
      <!-- <div class="search-sort">
        <div class="search-sort-item">
          <img src="../assets/images/swiper1.webp" alt="" />
        </div>
        <div class="search-sort-item">
          <img src="../assets/images/swiper1.webp" alt="" />
        </div>
        <div class="search-sort-item">
          <img src="../assets/images/swiper1.webp" alt="" />
        </div>
        <div class="search-sort-item">
          <img src="../assets/images/swiper1.webp" alt="" />
        </div>
        <div class="search-sort-item">
          <img src="../assets/images/swiper1.webp" alt="" />
        </div>
        <div class="search-sort-item">
          <img src="../assets/images/swiper1.webp" alt="" />
        </div>
        <div class="search-sort-item">
          <img src="../assets/images/swiper1.webp" alt="" />
        </div>
        <div class="search-sort-item">
          <img src="../assets/images/swiper1.webp" alt="" />
        </div>
      </div> -->
      <!-- 分类结束 -->
    </div>
    <!-- 隔开层 -->
    <div style="width: 100%; height: 20px; background: linear-gradient(#fffdfb, white)"></div>
    <!-- 下部分 -->
    <!-- <van-loading size="24px" style="text-align: center;" v-if="!categorieslist">加载中...</van-loading> -->
    <div class="Classified-works-library">
      <!-- 上部分title -->
      <div class="library-top">
        <div class="library-title">分类作品库</div>
        <!-- <div class="library-min-tit">查看全部</div> -->
      </div>
      <!-- 下部分 -->
      <div class="library-classify">
        <div class="library-classify-item" @click="workshows(item.id, index)" v-for=" (item, index) in categorieslist"
          :key="item.id" :listid="item.id">
          <img :src="item.cover + '?param=5y5'" alt="" />
          <div class="library-classify-item-title">{{ item.category_name }}</div>
        </div>
        <div class="library-classify-item">
        </div>
        <!-- <div class="library-classify-item" >
        </div> -->

      </div>
    </div>
  </div>
</template>
<style lang="scss">
.searchmain-top {
  // width: 100%;
  height: 100%;
  padding: 15px 15px 0 15px;
  background: linear-gradient(#fffdfb, white);

  .search-top-input {
    margin-bottom: 16px;

    // width: 100%;
    .search-box {
      padding: 7px 10px;
      // width: 100%;
      height: 16px;
      line-height: 16px;
      font-size: 14px;
      background: #ffffff;
      border-radius: 5px;
      box-shadow: 0px 2px 5px 0px #ccc;
      color: #b5b3b3;
    }
  }

  .serarch-banner {
    width: 100%;
    height: 190px;
    background: #b5b3b3;
    border-radius: 8px;

    img {
      width: 100%;
      height: 190px;
      border-radius: 8px;
    }
  }

  .search-sort {
    // padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .search-sort-item {
      width: 25%;

      img {
        padding: 20px 0;
        width: 60%;
        margin: auto;
      }
    }
  }
}

.Classified-works-library {
  padding: 15px;

  .library-top {
    display: flex;
    justify-content: space-between;

    .library-title {
      font-size: 16px;
      font-weight: bold;
      font-family: '仿宋';
    }

    .library-min-tit {
      font-size: 12px;
      color: #b3b3b5;
    }
  }

  .library-classify {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .library-classify-item {
      margin-top: 12px;
      width: 108px;
      border-radius: 8px;
      overflow: hidden;
      height: 130px;

      img {
        width: 108px;
        height: 108px;
        border-radius: 8px;
      }

      .library-classify-item-title {
        font-size: 12px;
        width: 100%;
        text-align: center;
        margin: 8px auto 0px;
        height: 12px;
        line-height: 12px;

      }
    }
  }
}</style>
